import React from "react";
import styles from "./index.module.scss";
import { View } from "@tarojs/components";
import TextBadge from "@/components/TextBadge";
import { IRecordItemProps } from "./type";
import { PROCESS_MAP } from "../../hooks/store";
function RecordItem(props: IRecordItemProps) {
  const { serialNumber, integral, date, status, onClick } = props;
  return (
    <View className={styles["record-item-wrapper"]} onClick={onClick}>
      <View className={styles["record-row"]}>
        <View className={styles["record-id"]}>{serialNumber}</View>
        <View className={styles["record-state"]}>
          <TextBadge
            text={PROCESS_MAP[status]?.name}
            color={PROCESS_MAP[status]?.color}
          />
        </View>
      </View>
      <View className={styles["record-row"]}>
        <View className={styles["record-label"]}>申诉积分值</View>
        <View className={styles["record-value"]}>{integral}</View>
      </View>
      <View className={styles["record-row"]}>
        <View className={styles["record-label"]}>结果生效日期</View>
        <View className={styles["record-value"]}>{date}</View>
      </View>
    </View>
  );
}

export default RecordItem;
